<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你爱好的运动是
    <input
      type="checkbox"
      class="allSelectInput"
    />全选/全不选(全选自动勾选)<br />
    <input type="checkbox" class="item" value="足球" /> 足球
    <input type="checkbox" class="item" value="篮球" /> 篮球
    <input type="checkbox" class="item" value="羽毛球" /> 羽毛球
    <input type="checkbox" class="item" value="乒乓球" /> 乒乓球
    <br />
    <button class="allSelect">全选</button>
    <button class="allNo">全不选</button>
    <button class="reSelect">反选</button>
    <button class="submit">提交并打印</button>

    <ul>
      <li>北京</li>
      <li>上海</li>
      <li>四川</li>
      <li>深圳</li>
    </ul>
    <button class="gz">创建一个广州节点</button><br />
    <button class="previousgz">将广州节点插入北京前面</button><br />
    <button class="replace">使用广州节点替换北京节点</button><br />
    <button class="remove">删除广州节点</button><br />
    <button class="reder">读取当前城市列表结构</button><br />
    <button class="rederBJ">读取北京内的节点</button>

    <script>
      const allSelect = document.querySelector('.allSelect');
      const allNo = document.querySelector('.allNo');
      const reSelect = document.querySelector('.reSelect');
      const submit = document.querySelector('.submit');
      // 获取全选的input框
      const allSelectInput = document.querySelector('.allSelectInput');
      const allInput = document.querySelectorAll('.item');
      console.log('allInput', allInput);
      // 点击全选是所有爱好全部选中
      allSelectInput.onclick = () => {
        allInput.forEach((item) => {
          item.checked = allSelectInput.checked;
        });
      };
      //
      allInput.forEach((ele) => {
        ele.onclick = () => {
          let count = 0;
          allInput.forEach((item) => {
            if (item.checked) {
              count++;
            }
          });
          allSelectInput.checked = count === allInput.length;
        };
      });
      // 全选
      allSelect.onclick = () => {
        allInput.forEach((item) => {
          item.checked = true;
        });
      };
      // 全不选
      allNo.onclick = () => {
        allInput.forEach((item) => {
          item.checked = false;
        });
      };
      // 反选
      reSelect.onclick = () => {
        allInput.forEach((item) => {
          if (item.checked) {
            item.checked = false;
          } else {
            item.checked = true;
          }
        });
      };
      // 提交并打印
      let arr = [];
      submit.onclick = () => {
        allInput.forEach((item) => {
          if (item.checked) {
            arr.push(item.value);
          }
        });
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
          if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
          }
        }
        console.log(newArr);
      };

      // ==================================
      const gzbtn = document.querySelector('.gz');
      const previousBtn = document.querySelector('.previousgz');
      const replaceBtn = document.querySelector('.replace');
      const removeBtn = document.querySelector('.remove');
      const rederBtn = document.querySelector('.reder');
      const rederBjBtn = document.querySelector('.rederBJ');

      const ul = document.querySelector('ul');
      const beijing = ul.firstElementChild;
      const gzNode = document.createElement('li');
      gzNode.append(document.createTextNode('广州'));

      // 创建一个广州节点
      gzbtn.onclick = () => {
        ul.append(gzNode);
      };
      // 将广州节点插入北京前面
      previousBtn.onclick = () => {
        ul.insertBefore(gzNode, beijing);
      };
      // 使用广州节点替换北京节点
      replaceBtn.onclick = () => {
        ul.replaceChild(gzNode, beijing);
      };
      // 删除广州节点
      removeBtn.onclick = () => {
        ul.children[4].remove();
      };
      // 读取当前城市列表结构
      rederBtn.onclick = () => {
        console.log(ul.cloneNode(true));
      };
      // 读取北京内的节点
      rederBjBtn.onclick = () => {
        console.log(beijing.childNodes);
      };
    </script>
  </body>
</html>
